<template>
  <el-timeline>
    <el-timeline
      v-for="item in chapterDatas"
      :key="item.id"
      :timestamp="item.timestamp"
      placement="top"
    >
      <el-card>{{ item.content }}</el-card>
    </el-timeline>
  </el-timeline>
</template>

<script setup>
import { chapter } from '@/api/user'
import { ref } from 'vue'
const chapterData = ref([])
const getChapterData = async () => {
  chapterData.value = await chapter()
}
getChapterData()
const chapterDatas = [
  {
    content: '课程导读',
    timestamp: '第一章',
    id: 1
  },
  {
    content: ' 标准化大厂编程规范解决方案之ESLint + Git Hooks ',
    timestamp: '第二章',
    id: 2
  },
  {
    content: '项目架构解决方案之搭建登录基础架构',
    timestamp: '第三章',
    id: 3
  },
  {
    content: '项目架构解决方案之搭建Layout基础架构',
    timestamp: '第四章',
    id: 4
  },
  {
    content: '后台项目前端综合解决方案之 通用功能开发',
    timestamp: '第五章',
    id: 5
  },
  {
    content: 'vue3 + element plus 综合实现解决方案之个人中心页面',
    timestamp: '第六章',
    id: 6
  },
  {
    content: 'excel 、zip 与前端结合解决方案之用户管理页面实现',
    timestamp: '第七章',
    id: 7
  },
  {
    content: '权限控制解决方案之角色、权限页面渲染实现项目的权限控制功能',
    timestamp: '第八章',
    id: 8
  },
  {
    content: '列表排序解决方案之实现热门文章排名',
    timestamp: '第九章',
    id: 9
  },
  {
    content: '文章编辑解决方案之实现创建文章功能',
    timestamp: '第十章',
    id: 10
  },
  {
    content: '错误综合处理方案之错误页面的统一处理',
    timestamp: '第十一章',
    id: 11
  },
  {
    content: '项目发布解决方案之构建与发布',
    timestamp: '第十二章',
    id: 12
  },
  {
    content: '课程总结',
    timestamp: '第十三章',
    id: 13
  }
]
</script>

<style lang="scss" scoped></style>
